<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<script>
    window.onload = function () {
        var maskView = document.getElementById("mask");
        var alertView = document.getElementById("alert");
        var loginA = document.getElementById("login");
        var closeBtn = document.getElementById("close_btn");
        var searchInput = document.getElementById("searchInput");
        searchInput.focus();//获得焦点
        searchInput.onfocus = function () {
            if (searchInput.value == "啊哈哈") {
                searchInput.value = "";
            }
        }

        searchInput.onblur = function () {
            if (searchInput.value == "") {
                searchInput.value = "syb";
            }
        }


        searchInput.onmousemove=function () {
            this.select();//全选
        }

        loginA.onclick = function () {
            maskView.style.display = "block";
            alertView.style.display = "block";
        };

        closeBtn.onclick = function () {
            maskView.style.display = "none";
            alertView.style.display = "none";
        };
    }
</script>
<body>
<div class="mask" id="mask">
    <div class="alert" id="alert">
        <span id="close_btn">X</span>
    </div>
</div>


<div class="shortcut">
    <div class="w">
        <div class="fl">
            <div class="dt"> 送至：北京
                <i><s>◇</s></i>
            </div>
        </div>
        <div class="fr">
            <ul>
                <li><a id="login" href="javascript:;">您好,请登录</a> &nbsp;&nbsp;
                    <a class="col-red" href="#">免费注册</a></li>
                <li>我的订单</li>
                <li class="sepLine"></li>
                <li class="fore">我的京东<i><s>◇</s></i></li>
                <li class="sepLine"></li>
                <li>京东会员</li>
                <li class="sepLine"></li>
                <li>企业采购</li>
                <li class="sepLine"></li>
                <li class="fore phone_jd">
                    <em class="phone_em"></em>
                    手机京东<i><s>◇</s></i></li>
                <li class="sepLine"></li>
                <li class="fore">关注京东<i><s>◇</s></i></li>
                <li class="sepLine"></li>
                <li>客户服务</li>
                <li class="sepLine"></li>
                <li>网站导航</li>
                <li class="sepLine"></li>
            </ul>
        </div>
    </div>

</div>

<div class="banner">
    <div class="w tp">
        <img src="images/topbanner.jpg " alt="悬浮显示文字">
        <a href="javascript:" class="closebanner"></a>
    </div>
</div>

<div class="w clearfix">
    <div class="logo">
        <a href="http://www.jd.com" class="jd_a" target="_blank" title="孙一菠">孙一菠</a>
        <div class="gif_div">
            <a href="#" class="a_gif">
                <img src="images/dong.gif" alt="2333">
            </a>
        </div>
    </div>
    <div class="search">
        <input id="searchInput" type="text" value="啊哈哈">
        <button>
            搜索
        </button>
    </div>
    <div class="car"><a href="#">老子的购物车</a>
        <span class="span1"></span>
        <span class="span2">></span>
        <span class="span3">8</span>
    </div>
    <div class="hotwords">
        <a href="#" class="col-red">11月11天</a>
        <a href="#">11.11秒杀</a>
        <a href="#">买2免1</a>
        <a href="#">Note5 黑</a>
        <a href="#">12期免息</a>
        <a href="#">智能科技</a>
        <a href="#">清仓</a>
        <a href="#">国际服饰</a>
        <a href="#">优惠券</a>
    </div>
</div>

<div class="jd_nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt"><a href="#">全部商品分类</a></div>
            <div class="dd">
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>
            </div>

        </div>
        <div class="navitem">
            <ul>
                <li><a href="#">服装城</a></li>
                <li><a href="#">美妆馆</a></li>
                <li><a href="#">超市</a></li>
                <li><a href="#">全球购</a></li>
                <li><a href="#">闪购</a></li>
                <li class="new"><a href="#">团购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">智能</a></li>
            </ul>

        </div>
        <div class="bike"><a href="#"></a></div>
    </div>
</div>


<!--大banner-->

<div class="banner604">
    <a href="#"></a>
</div>

<div class="w main clearfix">
    <div class="slider">
        <a href="#"><img src="images/slider1.jpg" alt=""></a>
        <div class="arrows">
            <a href="#" class="arrow_l"><</a>
            <a href="#" class="arrow_r">></a>
        </div>
    </div>

    <div class="nums">
        <ul class="circle">
            <li class="selected_num">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <div class="news">

    </div>
</div>

<!--底部页面-->

<div class="footer">
    <div class="server clearfix">
        <div class="slogan">
            <span class="item slo1">
                <img src="images/slogen1.png" alt="">
            </span>
            <span class="item slo2">
                <img src="images/slogen2.png" alt="">
            </span>
            <span class="item slo3">
                <img src="images/slogen3.png" alt="">
            </span>
            <span class="item slo4">
                <img src="images/slogen4.png" alt="">
            </span>
        </div>
        <div class="w">
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>

            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>

            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>

            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <div class="china">
                <div class="title">京东自营覆盖区县</div>
                <div class="describe"><p>京东已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
                    <p class="detail"><a href="#">查看详情 ></a>
                    </p></div>
            </div>
        </div>

    </div>
    <div class="w bottom_w">
        <div class="links">
            <a href="#">关于我们</a>|
            <a href="#">联系我们</a>|
            <a href="#">商家入驻</a>|
            <a href="#">营销中心</a>|
            <a href="#">手机京东</a>|
            <a href="#">友情链接</a>|
            <a href="#">销售联盟</a>|
            <a href="#">京东社区</a>|
            <a href="#">京东公益</a>|
            <a href="#">English Site</a>|
            <a href="#">Contact Us</a>
        </div>
        <div class="copyrights">北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零
            字第大120007号<br/>
            音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br/>
            网络文化经营许可证京网文[2014]2148-348号 违法和不良信息举报电话：4006561155 Copyright © 2004-2015 京东JD.com 版权所有<br/>
            京东旗下网站：360TOP 拍拍网 网银在线
        </div>
        <div class="mess">
            <a href="#"><img src="images/mess.png" alt=""></a>
            <a href="#"><img src="images/mess2.png" alt=""></a>
            <a href="#"><img src="images/mess3.png" alt=""></a>
            <a href="#"><img src="images/mess4.png" alt=""></a>
            <a href="#"><img src="images/mess5.png" alt=""></a>
        </div>
    </div>
</div>

</body>
</html>

